<template>
  <div class="">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="true"
      :router="true"
    >
      <el-submenu
        :index="index + ''"
        v-for="(menu, index) in menuConfig"
        :key="index"
      >
        <template slot="title">
          <i :class="menu.icon"></i>
          <span>{{ menu.title }}</span>
        </template>
        <el-menu-item
          v-for="(submenu, sidx) in menu.subs"
          :key="sidx"
          :index="submenu.path"
          >{{ submenu.title }}</el-menu-item
        >
      </el-submenu>
    </el-menu>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      menuConfig: [
        {
          title: "商品管理",
          icon: "el-icon-setting",
          subs: [
            { title: "商品列表", path: "/homepage/goods" },
            { title: "商品分类", path: "/homepage/category" },
            { title: "品牌管理", path: "/homepage/brand" },
            { title: "商品属性管理", path: "/homepage/attribute" },
          ],
        },
        {
          title: "订单中心",
          icon: "el-icon-setting",
          subs: [{ title: "订单列表", path: "/order" }],
        },
        {
          title: "店铺运营",
          icon: "el-icon-setting",
          subs: [
            { title: "专题管理", path: "/topic" },
            { title: "运营数据", path: "/statdata" },
          ],
        },
      ],
    };
  },
};
</script>
 
<style lang = "less" scoped>
</style>